<template>
    <div class="doc-md">
        <div class="doc-md-container">
            <section class="doc-md-section">
                <el-button class="doc-md-button" @click="goBack">返回</el-button>
                <vue-markdown :source="content"></vue-markdown>
            </section>
        </div>
    </div>
</template>

<script>
import md from "@/utils/markdown/markdown";
import VueMarkdown from "vue-markdown";

export default {
    name: "DocDetailMarkdown",
    components: {
        VueMarkdown
    },
    props: {
        form: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
            content: ""
        };
    },
    watch: {
        form: {
            handler: function(val) {
                if (val) this.fetchData()
            },
            deep: true
        }
    },
    methods: {
        createMarkdown(apiDetail, isToc, wikiData) {
            // 模板
            let mdTemplate = ``;
            try {
                // 项目名称信息
                // mdTemplate += md.createProjectMarkdown(project, wikiData);
                // 分类信息
                mdTemplate += md.createInterMarkdown(apiDetail, isToc);
                return mdTemplate;
            } catch (e) {
                this.msgError("接口文档解析失败");
            }
        },
        fetchData() {
            let apiDetail = JSON.parse(JSON.stringify(this.form))

            if (apiDetail.apiType) apiDetail.apiType = this.$enum.API_TYPE_MAP[apiDetail.apiType]
            if (apiDetail.apiCycle) apiDetail.apiCycle = this.$enum.API_UPDATE_FREQUENCY_MAP[apiDetail.apiCycle]

            const tempObj = {
                title: apiDetail.apiName,
                req_headers: apiDetail.paramHeaderYapiSchema || "[]",
                // req_params: JSON.stringify(apiDetail.paramBodyYapiSchema || '{}'),
                req_query: apiDetail.methodType != 'post' ? (apiDetail.paramQueryYapiSchema || []) : [],
                req_body_is_json_schema: true,
                req_body_is_other: JSON.stringify(apiDetail.paramBodyYapiSchema),
                req_body_other: apiDetail.methodType == 'post' ? JSON.stringify(apiDetail.paramBodyYapiSchema) : JSON.stringify({ "type": "object", "description": "", "properties": {} }),
                res_body_type: "json",
                res_body_is_json_schema: true,
                res_body: JSON.stringify(apiDetail.resultYapiSchema)
            };
            const apiItem = Object.assign({}, apiDetail, tempObj);
            const content = this.createMarkdown(apiItem, true);
            this.content = content;
        },
        goBack() {
            this.deleteTagsView()
            this.$router.go(-1)
        },
        deleteTagsView() {
            let view = { ...this.$route }
            this.$store.dispatch('tagsView/delView', view).then(() => { })
        },
    }
};
</script>

<style lang="scss">
.doc-md {
    height: calc(100% - 124px);

    .table {
        width: 100%;
        max-width: 100%;
        margin-bottom: 20px;
    }
    table {
        margin: 10px 0 15px 0;
        border-collapse: collapse;
    }

    td,
    th {
        border: 1px solid #ddd;
        padding: 12px 10px;
        min-width: 0;
        box-sizing: border-box;
        text-overflow: ellipsis;
        vertical-align: middle;
        position: relative;
        text-align: left;
    }

    th {
        overflow: hidden;
        user-select: none;
        background-color: #fff;
        border-right: 1px solid #ebeef5;
    }

    a,
    a:link,
    a:visited {
        color: #5f8df2;
        text-decoration: none;
    }

    a:hover,
    a:focus {
        color: #59d69d;
        text-decoration: none;
    }

    &-container {
        blockquote {
            margin-left: 32px;
            border-left: 4px solid #ccc;
            padding-left: 16px;
        }

        pre {
            display: block;
            padding: 9.5px;
            margin: 0 0 10px;
            font-size: 13px;
            line-height: 1.42857143;
            color: #333;
            word-break: break-all;
            word-wrap: break-word;
            background-color: #f5f5f5;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        // markdown code样式
        pre code {
            padding: 0 1em;
            font-size: inherit;
            color: inherit;
            white-space: pre-wrap;
            background-color: transparent;
            border-radius: 0;
        }
        code {
            padding: 0 1em;
            margin: 0;
            font-size: 85%;
            background-color: rgba(27, 31, 35, 0.05);
            border-radius: 3px;
            font-family: inherit;
        }
        .pre-scrollable {
            max-height: 340px;
            overflow-y: scroll;
        }
    }

    &-section {
        position: relative;

        p {
            img {
                display: inline-block;
                width: 100%;
            }
        }
        color: #2c3e50;
        h1 {
            font-size: 2.2rem;
            margin-top: 0;
        }

        h2 {
            font-size: 1.65rem;
            padding-bottom: 0.3rem;
            border-bottom: 1px solid #eaecef;
        }

        h3 {
            font-size: 1.35rem;
        }
    }

    &-button {
        position: absolute;
        top: 0;
        right: 0;
    }
}
</style>
